<template>
    <div>
        <div class="box">
            <el-form :model="sellerForm" :rules="sellerFormRules" ref="sellerForm" label-width="160px" class="demo-ruleForm">
              <el-form-item label="商家ID" prop="sellerId">
                <el-input v-model="sellerForm.sellerId" disabled></el-input>
              </el-form-item>
              <el-form-item label="公司LOGO" prop="logoPic">
                  <el-upload
                    class="avatar-uploader"
                    :action="uploadUrl"
                    :headers="headers"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
              </el-form-item>
              <el-form-item label="公司名称" prop="name">
                <el-input v-model="sellerForm.name"></el-input>
              </el-form-item>
              <el-form-item label="店铺名称" prop="nickName">
                <el-input v-model="sellerForm.nickName"></el-input>
              </el-form-item>
              <el-form-item label="公司法人" prop="legalPerson">
                <el-input v-model="sellerForm.legalPerson"></el-input>
              </el-form-item>
              <el-form-item label="公司地址" prop="address">
                <el-input v-model="sellerForm.address"></el-input>
              </el-form-item>
              <el-form-item label="营业执照" prop="licenseNumber">
                <el-input v-model="sellerForm.licenseNumber"></el-input>
              </el-form-item>
              <el-form-item label="联系姓名" prop="linkmanName">
                <el-input v-model="sellerForm.linkmanName"></el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="linkmanMobile">
                <el-input v-model="sellerForm.linkmanMobile"></el-input>
              </el-form-item>
              <el-form-item label="店铺状态" prop="status">
                <el-tag v-if="sellerForm.status==0">未审核</el-tag>
                <el-tag v-if="sellerForm.status==1" type="success">已审核</el-tag>
                <el-tag v-if="sellerForm.status==2" type="danger">已锁定</el-tag>
                <!-- <el-input v-model="sellerForm.status"></el-input> -->
              </el-form-item>
              <el-form-item v-if="sellerForm.status!=2">
                  <el-button type="primary" @click="handleEditSeller" >修改</el-button>
                </el-form-item>
            </el-form>  
        </div>
    </div>
</template>

<script>
    import {getSellerInfo, setSellerInfo} from '../api/api.js'
    export default {
        name: 'SellerInfo',
        data() {
            return {
                token: '',
                user: null,
                sellerForm: null,
                // 公司logo图片链接地址
                imageUrl: null,
                // 上传的图片服务器地址
                uploadUrl: "http://localhost:8040/user/seller/logoUpload",
                headers: {
                  token: this.token,
                },
                sellerFormRules: {
                    
                }
            }
        },
        mounted() {
            let token = window.sessionStorage.getItem('token')
            if(token == null) {
                // this.$router.push('/login')
                return
            }
            // 保存当前登录用户信息
            this.token = token
            let u = window.sessionStorage.getItem('user')
            this.user = JSON.parse(u)
            console.log('user', this.user);
            
            // 获取当前商家的信息
            this.loadSellerInfo()
        },
        methods: {
            handleEditSeller() {
                console.log('handleEditSeller');
                this.sellerForm.logoPic = this.imageUrl;
                setSellerInfo(this.sellerForm).then(res => {
                    if(res.data.code == 200) {
                        this.$message.success("操作成功")
                        this.loadSellerInfo()
                    }
                    else {
                        let msg = res.data.msg
                        this.$message.error(msg)
                    }
                })
            },
            // 获取商家信息
            loadSellerInfo() {
                if(this.user == null) {
                    return
                }
                let param = {
                    id: this.user.sellerId
                }
                console.log('param', param);
                getSellerInfo(param).then(res => {
                    if(res.data.code == 200) {
                        this.sellerForm = res.data.data
                        this.imageUrl = this.sellerForm.logoPic
                        this.$message.success("操作成功")
                    }
                    else {
                        let msg = res.data.msg
                        this.$message.error(msg)
                    }
                })
            },
            // 图片上传回调
            handleAvatarSuccess(res, file) {
                //this.imageUrl = URL.createObjectURL(file.raw);
                //console.log('imageUrl',this.imageUrl);
                console.log('handleAvatarSuccess',res,file);
                this.imageUrl = res.data.url;
            },
            // 图片上传之前的检查
            beforeAvatarUpload(file) {
                // const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
        
                // if (!isJPG) {
                //   this.$message.error('上传头像图片只能是 JPG 格式!');
                // }
                if (!isLt2M) {
                  this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                
                this.headers.token = this.token
                
                // return isJPG && isLt2M;
                return isLt2M;
            }
            
        }
    }
</script>

<style scoped>
    .box {
        width: 600px;
        height: auto;
        margin: auto;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
</style>
